<template>
<!-- 组件结构     -->
                <div>
                   学生姓名：<h2>{{student.name}}</h2>
                   年龄：<h2>{{student.address}}</h2>
                   <button @click='showName'>name</button>
                </div>
</template>

<script>
// 组件交互的代码
// const school = Vue.extend({//组件没有el由VUE管理
//             data() {
//                 return {
//                     school: {
//                         name: "123",
//                         address: "456"
//                     }
//                 }
//             },
//             methods: {
//                 showName(){
//                     alert(this.school.name)
//                 }
//             },
//         })
//         export default school
    export default {//组件没有el由VUE管理
            name:"school",
            data() {
                return {
                    student: {
                        name: "123",
                        age: "456"
                    }
                }
            },
            methods: {
                showName(){
                    alert(this.student.name)
                }
            },
        }   
</script>
 
<style>
/* 样式 */
.demo{
    background-color: orange;
}
</style>